<template>
	<view>
		<!-- 背景图 -->
		<user-space-head :userinfo="userinfo"></user-space-head>
		<!-- 统计 -->
		<view class="user-space-data">
			<home-data :homedata="spacedata"></home-data>
		</view>
		<view style="height: 20upx; background: #F4F4F4;"></view>
		<!-- tab -->

		<!-- 页面的切换 -->
		<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabChange="changeTab"
			:scrollItemStyle="'width:33.3%'">
		</swiper-tab-head>

		<block v-for="(item,index) in tablist" :key="index">
			<!-- 主页	 -->
			<template v-if="tabIndex == 0">
				<user-space-userinfo :userinfo="userinfo"></user-space-userinfo>
			</template>
			<template v-if="tabIndex==index">
				<block v-for="(itemSub,indexSub) in item.list" :key="indexSub">
					<common-list :item="itemSub" :index="indexSub"></common-list>
				</block>
			</template>
		</block>
		<!-- 操作菜单 -->
		<user-space-popup :show="show" @hide="togleShow" @lahei="lahei" @beizhu="beizhu"></user-space-popup>
	</view>
</template>

<script>
	import userSpaceHead from "../../components/user-space/user-space-head.vue";
	import userSpaceUserinfo from "../../components/user-space/user-space-userinfo.vue";
	import userSpacePopup from "../../components/user-space/user-space-popup.vue";
	import homeData from "../../components/home/home-data.vue";
	import swiperTabHead from "../../components/index/swiper-tab-head.vue";
	import loadMore from "../../components/common/load-more.vue";

	export default {
		components: {
			userSpaceHead,
			homeData,
			swiperTabHead,
			userSpaceUserinfo,
			loadMore,
			userSpacePopup
		},
		data() {
			return {
				show: false, //是否显示蒙版
				userinfo: {
					bgimg: 1,
					userpic: "../../static/demo/userpic/12.jpg", //头像
					username: "昵称", //名字
					sex: 0, //性别 0男 1女
					age: 20, //年龄
					isFollow: false, //关注
					regtime: "2021-04-11", //糗龄
					id: 1213, //糗百科ID
					birthday: "1999-02-07", //星座
					job: "IT", //职业
					path: "湖南长沙", //故乡
					qg: "已婚" //情感状态
				},
				spacedata: [
					{
						name: "获赞",
						num: "10k"
					},
					{
						name: "关注",
						num: 11
					},
					{
						name: "粉丝",
						num: 12
					},
				],
				tabIndex: 0,
				tabBars: [{
						name: "主页",
						id: "zhuye"
					},
					{
						name: "糗事",
						id: "qiushi"
					},
					{
						name: "动态",
						id: "dongtai"
					},
				],
				tablist: [{}, 
				{ //默认
					loadText: "上拉加载更多",
					list: [ //图文数据
						{
							userpic: '../../static/demo/userpic/19.jpg',
							username: "刘诗诗",
							sex: 1, //0 男 1 女
							age: 28,
							isFollow: false,
							title: "我不懂得你眉眼间若有若无的黯然,但我希望能化解它!",
							titlePic: "../../static/demo/datapic/15.jpg",
							video: false,
							share: false,
							path: "长沙 芙蓉区",
							shareNum: 305,
							commonNum: 101,
							goodNum: 782
						},
						//视频数据
						{
							userpic: '../../static/demo/userpic/7.jpg',
							username: "金星",
							sex: 1, //0 男 1 女
							age: 36,
							isFollow: false,
							title: "幻想属于黑夜，白天经不起浪费。",
							titlePic: "../../static/demo/datapic/17.jpg",
							video: {
								lookNum: "200w",
								long: "3:14"
							},
							share: false,
							path: "北京 朝阳区",
							shareNum: 359,
							commonNum: 211,
							goodNum: 982
						}
					], //关注
				}, { // 最新
					loadText: "上拉加载更多...",
					list: [ //文字
						{
							userpic: '../../static/demo/userpic/20.jpg',
							username: "胡歌",
							sex: 0, //0 男 1 女
							age: 31,
							isFollow: false,
							title: "如果皮囊无法修复，就用思想去填满它。",
							video: false,
							share: false,
							path: "长沙 雨花区",
							shareNum: 352,
							commonNum: 111,
							goodNum: 820
						},
						//图文
						{
							userpic: '../../static/demo/userpic/19.jpg',
							username: "刘诗诗",
							sex: 1, //0 男 1 女
							age: 28,
							isFollow: false,
							title: "我不懂得你眉眼间若有若无的黯然,但我希望能化解它!",
							titlePic: "../../static/demo/datapic/15.jpg",
							video: false,
							share: false,
							path: "长沙 芙蓉区",
							shareNum: 305,
							commonNum: 101,
							goodNum: 782
						}
					],
				}]
			}
		},
		onPullDownRefresh() {
			this.getData();
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				this.togleShow()
			}
		},
		methods: {
			changeTab(index) {
				this.tabIndex = index;
			},
			tabchange(event) {
				this.tabIndex = event.detail.current;
			},
			// 操作菜单显示和隐藏
			togleShow() {
				this.show = !this.show;
			},
			lahei() {
				// 拉黑
				this.togleShow()
			},
			beizhu() {
				// 备注
				this.togleShow()
			},
			// 上拉加载更多
			getData() {
				setTimeout(() => {
					let arr = [{
							userpic: '../../static/demo/userpic/21.jpg',
							username: "周絮",
							sex: 0, //0 男 1 女
							age: 27,
							isFollow: false,
							title: "四季花常在,九州事尽知。",
							video: false,
							share: false,
							path: "四季山庄",
							shareNum: 352,
							commonNum: 111,
							goodNum: 820
						},
						{
							userpic: '../../static/demo/userpic/22.jpg',
							username: "温客行",
							sex: 0, //0 男 1 女
							age: 26,
							isFollow: false,
							title: "人贵乎二品，一为仁，二为勇。先贤论世间勇者，分为气勇、血勇、骨勇、神勇，皆为少年之勇",
							titlePic: "../../static/demo/datapic/48.jpg",
							video: {
								lookNum: "800w",
								long: "13:14"
							},
							share: false,
							path: "青崖山 鬼谷",
							shareNum: 352,
							commonNum: 111,
							goodNum: 820
						}
					]
					this.tablist[this.tabIndex].list = arr;
					uni.stopPullDownRefresh();
				}, 2000)
			}
		}
	}
</script>

<style>
	.user-space-margin {
		margin: 15upx 0;
	}

	.user-space-data {
		background: #FFFFFF;
		position: relative;
		z-index: 10;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		margin-top: -15upx;
	}
</style>
